<template>
  <div style="min-height: 350px;"  v-loading="!loading">
    <el-empty v-if="articles.length == 0" description="你还没有发过文章呢">
      <a href="/article/write">
        <el-button type="primary">立即发表</el-button>
      </a>
    </el-empty>
    <el-table v-else :data="articles"
              v-infinite-scroll="load"
              infinite-scroll-distance="1"
              style="width: 100%; overflow:auto;  max-height: 350px"

              >
      <el-table-column label="发表时间" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.gmtCreate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="分类" width="100">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.categoryName }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="民族" width="180">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.nationName }}</el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="文章内容" width="450">
        <template slot-scope="scope">

          <div slot="reference">
            <el-link :href="'/article/detail?id=' + scope.row.id + '&nid=' + scope.row.nationId">
              {{ scope.row.title }}
            </el-link>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row)">
            <el-button slot="reference" size="mini" type="danger">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>

    </el-table>

  </div>

</template>

<script>
export default {
  data() {
    return {
      user: {},
      articles: [],
      articleTemp: [],
      pageSize: 7,
      pageNum: 1,
      userId: '',
      loading: true,
      // all:'',
    }
  },
  computed: {
    // noMore () {
    //   return this.all == this.articles.length;
    // },
    // disabled () {
    //   return this.loading || this.noMore
    // },

  },
  created() {
    this.getCurrentUserInfo();

  },

  methods: {
    getCurrentUserInfo() {
      this.axios.get("/user/personal").then(({data}) => {
        if (data.state == 20000) {
          this.user = data.data;
          this.getAllList();
        } else {
          this.$message.error(data.message);
        }

      })
    },


    getAllList() {
      this.loading = false;
      this.axios.get("/article/get-list-by-user?userId=" + this.user.id
          + "&pageNum=" + this.pageNum + "&pageSize=" + this.pageSize
      ).then(({data}) => {
        if (data.state == 20000) {

          this.articleTemp = data.data.list
          this.articleTemp.forEach((item) => {
            this.articles.push(item);
          })
          this.loading = true;

          console.log("this.articles",this.articles);
          console.log(this.articles.length);

        } else {
          this.$message.error(data.message);
        }

      })
    },

    handleDelete(id) {
      console.log(id)
      this.axios.get("/article/delete-by-keys?ids="+id.id).then(({data}) => {
        if (data.state == 20000) {
          this.$message.success(data.message);
          location.reload();//上传成功后自动刷新页面，刚上传的头像显示出来
        } else {
          this.$message.error(data.message);
        }

      })

    },

    load() {

      if(this.loading==true){
        this.pageNum += 1;
        this.getAllList();
      }

      // setTimeout(() => {
      //
      // }, 1000)



      console.log("哈哈哈哈");
    },
  }


}
</script>
<style scoped>
.twoLineCls {
  /*text-overflow: -o-ellipsis-lastline;*/
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}

* {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB W3", "Hiragino Sans GB",
  "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
</style>
